<template>
  <div class="case-integral flex">
    <!--组织架构-->
    <div class="org-tree">
      <organization
        ref="organ"
        @onSearch="searchFun"
        @onClear="clearFun"
        :statisticalType="0"
        :source="'caseRate'"></organization>
    </div>
    <!--内容-->
    <div class="integral-content">
      <div v-show="showFlag">
        <dt-search ref="search" :label-width="90" :xl="6" :xlBtn="12" @reset="resetFun">
          <div class="getVal">
            取值条件：{{ searchTarget?.length }}个目标
            <span @click="updataTarget">修改</span>
          </div>
        </dt-search>
        <customTopListVue
          :fromType="'targetCount'"
          :topRocerdData="topRocerdData"
          @getClickData="getClickData" />
      </div>
      <dt-grid ref="table" :columns="columns" :page="page" :onFetch="onFetch">
        <div class="flex btn-content" slot="btn">
          <div class="handles" style="margin-top: 5px">
            <Poptip trigger="hover">
              <Button type="primary">导出</Button>
              <div slot="content" v-if="unlocking('0207010701')">
                <div class="impotBtn" @click="exportExcelFun(1)">导出筛选目标</div>
                <div class="impotBtn" @click="exportExcelFun(0)">导出全部目标</div>
              </div>
            </Poptip>
            <Button type="default" @click="showSearchFun">{{ showFlag ? '收起筛选' : '展开筛选' }}</Button>
          </div>
        </div>
      </dt-grid>
    </div>
    <target-val ref="targetVal" @chooseTask="chooseTask"></target-val>
  </div>
</template>
<script>
  import columnConfig from './opt/column'
  import targetVal from './components/targetVal.vue'
  import SearchOpt from './opt/search'
  import moment from 'moment'
  import clueTargetMgr from '@/biz/clueTarget/clueTarget'
  import organization from '@/components/organzation.vue'
  import toolApi from '@/biz/base/tool'
  import customTopListVue from '@/components/customTopList.vue'
  export default {
    data() {
      return {
        columns: [],
        page: {
          total: 0,
          current: 1
        },
        orgCheck: {},
        buildingId: '',
        filterParams: {},

        //3.11
        rankDivisionIds: [],
        searchInfo: {
          year: moment(new Date()).format('YYYY'),
          month: moment(new Date()).format('MM'),
          headCodes: [],
          housesName: ''
        },
        topRocerdData: {},
        orgList: [],
        classify: '0',
        orgCheckFlag: true,
        showFlag: true,
        targetConfigVal: null,
        searchTarget: null,
        headCodes: []
      }
    },
    created() {},
    mounted() {},
    watch: {},
    components: {
      organization,
      customTopListVue,
      targetVal
    },
    methods: {
      resetFun() {
        this.chooseTask()
      },
      chooseTask() {
        this.searchInfo = {
          year: moment(new Date()).format('YYYY'),
          month: moment(new Date()).format('MM'),
          headCodes: [],
          housesName: ''
        }
        this.getTargetConfig()
      },
      showSearchFun() {
        this.showFlag = !this.showFlag
        this.columns = columnConfig.headers(this)
        this.$refs.table.fixHeight()
      },
      updataTarget() {
        this.$refs.targetVal.show(this.targetConfigVal)
      },

      // 获取统计数据
      getTargetConfig(reset = false) {
        this.searchTarget = []
        this.headCodes = []
        let params = {}
        clueTargetMgr.getTargetConfig(params).then((res) => {
          this.targetConfigVal = res
          this.targetConfigVal.buildingTargetStatus = Boolean(this.targetConfigVal.buildingTargetStatus)
          this.targetConfigVal.userTargetStatus = Boolean(this.targetConfigVal.userTargetStatus)

          this.targetConfigVal.targetDetailsConfigList.forEach((item) => {
            item.hasCheck = Boolean(item.hasCheck)
          })

          if (this.targetConfigVal.buildingTargetStatus) {
            let buidVal = this.targetConfigVal.targetDetailsConfigList.filter(
              (item) => item.targetGroupType == 0 && item.hasCheck
            )
            this.searchTarget.push(...buidVal)
          }
          if (this.targetConfigVal.userTargetStatus) {
            let peopleVal = this.targetConfigVal.targetDetailsConfigList.filter(
              (item) => item.targetGroupType == 1 && item.hasCheck
            )
            this.searchTarget.push(...peopleVal)
          }

          this.searchTarget.forEach((item) => {
            item.key = item.configCode
            item.value = item.configName
            this.headCodes.push(item.configCode)
          })

          this.$refs.search.init(this.$refs.table, new SearchOpt(this), this.searchInfo)
          this.$refs.table.init(this)
          this.$refs.table.fetch(reset)
        })
      },
      exportExcelFun(val) {
        this.filterParams.exportType = val
        clueTargetMgr.targetSettingExport(this.filterParams)
      },
      // 获取点击顶部列表的key值
      getClickData(val) {
        this.classify = val.queryType
        this.$refs.table.fetch(true)
      },
      // 获取统计数据
      getCount() {
        clueTargetMgr
          .targetSettingCount(this.filterParams)
          .then((res) => {
            this.topRocerdData = res
          })
          .catch((err) => {
            this.topRocerdData = {}
          })
      },

      searchFun(orgCheck) {
        console.log(orgCheck, '4444')
        this.orgCheck = {
          ...orgCheck
        }
        this.getTargetConfig(true)
      },
      async onFetch(data) {
        if (this.headCodes.length < 1) {
          data.headCodes = [-1]
        } else {
          if (data.headCodes.length < 1) {
            data.headCodes = this.headCodes
          }
        }

        this.filterParams = {
          ...data,
          orgId: this.orgCheck.orgId,
          classify: this.classify
        }
        this.filterParams.headCodes = this.filterParams.headCodes.map((element) => Number(element))
        this.columns = columnConfig.headers(this)

        this.getCount()

        return clueTargetMgr
          .targetSettingList(this.filterParams)
          .then((res) => {
            this.page.total = res.pages
            this.$refs.table.fixHeight()
            return res.list
          })
          .catch((err) => {})
      },

      clearFun(flag = false) {
        this.$refs.table.clearFilter()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .case-integral {
    padding: 20px;

    .export-btn {
      line-height: 30px;
      cursor: pointer;
      color: #2d8cf0;
      text-align: center;
      border-bottom: 1px #e8eaec solid;
    }

    .integral-content {
      width: calc(100% - 270px);

      .org-text {
        margin: 10px 0;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

      .base-content {
        margin: 30px 0;

        .base-msg {
          li {
            margin-right: 30px;

            .name {
              color: #666;
            }

            .value {
              font-size: 22px;
              color: #222;
              font-weight: bold;
              text-align: center;
            }
          }

          .selected {
            .name {
              color: #2d8cf0;
            }

            .value {
              color: #2d8cf0;
            }
          }
        }

        .operate-btn {
          margin-right: 30px;

          .ivu-btn-primary {
            margin-left: 8px;
          }
        }
      }
    }
  }
  .getVal {
    display: inline-block;
    background-color: antiquewhite;
    color: #999;
    padding: 3px 10px;
    span {
      color: #2d8cf0;
      cursor: pointer;
    }
  }
  .tip-text {
    margin: 20px 0;
    color: #a30014;
    font-size: 16px;
  }
  .handles {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    > * {
      margin-left: 10px;
    }
  }
  .impotBtn {
    line-height: 2;
    cursor: pointer;
    color: #2d8cf0;
    text-align: center;

    &:first-child {
      border-bottom: 1px #e8eaec solid;
    }
  }
  ::v-deep .ivu-date-picker-header {
    display: none;
  }
</style>
